<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用户记事本</title>
  <link rel="stylesheet" href="../iconfont/iconfont.css">
  <link rel="stylesheet" href="../bootstrap/bootstrap.min.css">
</head>

<body>

  <div class="container-fluid">

    <div class="row p-1 d-flex justify-content-end">

      <div class="col-auto">
        <input id="txtQTitle" type="text" class="form-control" placeholder="标题模糊查询">
      </div>

      <div class="col-auto">
        <div class="input-group">
          <i class="input-group-text iconfont">&#xeb26;</i>
          <input id="txtQInfo" type="text" class="form-control" placeholder="内容模糊查询">
        </div>
      </div>

      <div class="col-auto btn-group">
        <span id="btnQuery" class="btn btn-success">
          查询 <i class="iconfont">&#xe60b;</i>
        </span>

        <span id="btnReset" class="btn btn-danger">
          重置 <i class="iconfont">&#xe6a8;</i>
        </span>

        <span data-bs-toggle="modal" data-bs-target="#addDialog" class="btn btn-primary">
          添加 <i class="iconfont">&#xe657;</i>
        </span>
      </div>

    </div>


    <!-- 数据呈现的部分 -->
    <table class="table table-hover">

      <thead>
        <tr>
          <th>标题</th>
          <th>内容</th>
          <th>最后修改时间</th>
          <th>操作</th>
        </tr>
      </thead>

      <tbody id="tbData"></tbody>


    </table>

    <!-- 分页的部分 -->
    <nav class="pagination d-flex justify-content-center" id="navPage">

      <span class="page-item">
        <a href="javascript:void(0)" class="page-link">上一页</a>
      </span>
      <span class="page-item">
        <a href="javascript:void(0)" class="page-link"></a>
      </span>
      <span class="page-item">
        <a href="javascript:void(0)" class="page-link">下一页</a>
      </span>

    </nav>


  </div>

  <!-- 添加的对话框 -->
  <div id="addDialog" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">

        <div class="modal-header">
          <h5 class="modal-title">添加记事本</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>

        <div class="modal-body">

          <div class="p-2">
            <input id="txtATitie" type="text" class="form-control" placeholder="标题">
          </div>

          <div class="p-2">
            <input id="txtAInfo" type="text" class="form-control" placeholder="内容">
          </div>

        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
          <button id="btnAdd" type="button" class="btn btn-primary">
            保存
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- 修改的对话框 -->
  <div id="modifyDialog" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">

        <div class="modal-header">
          <h5 class="modal-title">修改记事本</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>

        <div class="modal-body">

          <div class="p-2">
            <input id="txtMTitie" type="text" class="form-control" placeholder="标题">
          </div>

          <div class="p-2">
            <input id="txtMInfo" type="text" class="form-control" placeholder="内容">
          </div>

        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
          <button id="btnModify" type="button" class="btn btn-primary">
            保存
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- 删除的对话框 -->
  <div id="delDialog" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">

        <div class="modal-header">
          <h5 class="modal-title">删除记事本</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>

        <div class="modal-body">
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
          <button id="btnDel" type="button" class="btn btn-primary">
            确定
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- alert信息 -->
  <div class="toast-container position-fixed bottom-0 end-0 p-3">
    <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <strong class="me-auto">服务器信息</strong>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body">
        Hello, world! This is a toast message.
      </div>
    </div>
  </div>


  <script src="../bootstrap/popper.min.js"></script>
  <script src="../bootstrap/bootstrap.min.js"></script>

  <script src="./js/notepad.js" type="module"></script>
</body>

</html>